<template>
    <div class="self-lift-address-box">
        <h5 class="bigtitle" v-t="'goods.text15'">Self Withdrawal</h5>
        <ul class="addressList" v-if="detail.apiShopDetailDto">
            <!-- <van-checkbox-group v-model="selfAddress" ref="checkboxGroup"> -->
            <van-radio-group v-model="orderInfo.selfAddress" direction="horizontal">
                <li v-for="(dt,i) in detail.apiShopDetailDto.selfDeliverys" :key="i">
                    <div class="title">
                        <div class="sfcbkBox">
                            <!-- <my-checkbox :name="dt.address+'|'+dt.phone" @onChange="setCheck"/> -->
                            <my-radio :name="dt.address+'|'+dt.phone"/>
                        </div>
                        <label>Pick up place {{i+1}}:</label>
                        <!-- <div class="btn">Navigation</div> -->
                    </div>
                    <div class="address">
                        <i class="iconfont icon-ditu-dibiao"></i>
                        <p>{{dt.address}}</p>
                    </div>
                    <div class="phones">
                        <a :href="`tel:${dt.phone}`">{{dt.phone}}</a>
                    </div>
                </li> 
            </van-radio-group>
        </ul>
    </div>
</template>

<script>
import { reactive,toRefs,getCurrentInstance,computed,onMounted} from 'vue'
import {useRoute,useRouter} from 'vue-router'
import { useStore } from 'vuex'
import myCheckbox from '@/components/myCheckbox.vue'
import { useI18n } from 'vue-i18n'

export default {
    components:{
       myCheckbox
    },
    props:{

    },
    setup(props,context){
        const router = useRouter()
        const route = useRoute()
        const store = useStore()
        const {proxy} = getCurrentInstance()
        const {t} = useI18n()

        const state = reactive({
            detail:computed(()=>store.state.shop.detail),
            orderInfo:computed(()=>store.state.shop.orderInfo),
            //selfAddress:''
        })

        onMounted(()=>{
            
        })

        return{
            ...toRefs(state)
        }
    }
}
</script>

<style lang="scss" scoped>
    .self-lift-address-box{
        display: flex;
        flex-flow: column;
        height: 100%;
        width: 100%;
        overflow: hidden;
        .bigtitle{
            line-height: normal;
            font-size: 28px;
            font-family: Inter-Medium, Inter;
            font-weight: 500;
            color: #FFFFFF;
            line-height: normal;
            text-shadow: 0px 0px 4px #07A3FB;
            //-webkit-background-clip: text;
            //-webkit-text-fill-color: transparent;
        }
        .addressList{
            padding:20px 0 0 0;
            margin: 0;
            list-style: none;
            flex: 1;
            height: 100%;
            overflow: hidden;
            overflow-y: auto;
            li{
                width: 100%;
                min-height: 200px;
                background-color: rgba(103,248,255,0.2000);
                border-bottom-left-radius: 20px;
                border-top-right-radius: 20px;
                padding: 20px;
                &+li{
                    margin-top: 25px;
                }
                .title{
                    display: flex;
                    height: 40px;
                    align-items: center;
                    label{
                        flex: 1;
                        font-family: Inter-Medium, Inter;
                        font-weight: 500;
                        font-size: 24px;
                    }
                    .btn{
                        height: 46px;
                        line-height: 46px;
                        background: rgba(102, 250, 255,0.6);
                        padding: 0 15px;
                        border-bottom-left-radius: 15px;
                        border-top-right-radius: 15px;
                    }
                }
                .address{
                    display: flex;
                    line-height: normal;
                    align-items: center;
                    padding: 20px 0 0 0;
                    i{
                        font-size: 30px;
                        color: #64E3F5;
                    }
                    p{
                        font-size: 28px;
                        font-family: Inter-Medium, Inter;
                        font-weight: 500;
                        color: #C9E5FF;
                        line-height: 34px;
                        padding: 0 0 0 14px;
                    }
                }
                .phones{
                    display: flex;
                    width: 100%;
                    overflow: hidden;
                    overflow-x: auto;
                    justify-content: left;
                    line-height: normal;
                    padding: 20px 0 5px 0;
                    a{
                        font-size: 30px;
                        font-family: Inter-Medium, Inter;
                        font-weight: 500;
                        padding: 0 25px 0 0;
                        color: #F0FFFF;
                        flex-shrink: 0;
                    }
                }
            }
        }
    }
</style>